import { useNavigate } from 'react-router-dom';

export default function NotFound() {
    const navigate = useNavigate();

    const handleGoBack = () => {
        navigate(-1);
    };

    const handleGoHome = () => {
        navigate('/');
    };

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: '60vh',
            padding: '20px',
            textAlign: 'center',
            color: '#666'
        }}>
            <div style={{
                fontSize: '120px',
                fontWeight: 'bold',
                color: '#ddd',
                marginBottom: '20px'
            }}>
                404
            </div>
            <h2 style={{
                fontSize: '24px',
                marginBottom: '10px',
                color: '#333'
            }}>
                页面未找到
            </h2>
            <p style={{
                fontSize: '16px',
                marginBottom: '30px',
                color: '#999'
            }}>
                抱歉，您访问的页面不存在或已被删除
            </p>
            <div style={{
                display: 'flex',
                gap: '15px',
                flexWrap: 'wrap'
            }}>
                <button 
                    onClick={handleGoBack}
                    style={{
                        padding: '10px 20px',
                        backgroundColor: '#1890ff',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontSize: '14px'
                    }}
                >
                    返回上页
                </button>
                <button 
                    onClick={handleGoHome}
                    style={{
                        padding: '10px 20px',
                        backgroundColor: '#52c41a',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        fontSize: '14px'
                    }}
                >
                    返回首页
                </button>
            </div>
        </div>
    );
}
